//@import url("./icon/iconfont.css");

.iconfont {
  font-size: inherit;
}

/* 项目整体颜色皮肤 */
:root {
  // 不可用 border0

  --ee-bgcolor: #fff;

  --ee-button-padding: .5em 1em;

  --ee-dialog-title: #333;
  --ee-dialog-text: var(--text0);
  --ee-dialog-confirm: var(--primary0);
  --ee-dialog-line: #dcdfe6;

  --ee-form-input-width: 20em;

  --ee-input-border: var(--line3);
  --ee-input-border-hover: var(--primary3);
  --ee-input-border-focus: var(--primary-shadow);
  --ee-input-placeholder: var(--text7);
  --ee-input-icon: var(--text7);
  --ee-input-icon-hover: var(--text5);
  --ee-input-readonly: var(--text6);
  --ee-input-readonly-bg: var(--line6);

  --ee-radio-bgcolor: var(--primary0);
  --ee-radio-border-radius: 100%;
  --ee-checkbox-border-radius: .1em;

  --ee-switch-color0: var(--line0);
  --ee-switch-color1: var(--primary0);

  --ee-highlight-text: var(--danger3);
  --ee-highlight: yellow;

  --ee-tabbar-color: var(--primary0);

  --ee-table-border: var(--text9);
  --ee-table-stripe: #fafafa;


  --ee-space: .5em;
  --ee-l-margin: .5em;

  /* 遮罩颜色 */
  --ee-mask: rgba(0, 0, 0, .7);
  --ee-transition-duration: .3s;
  --ee-animation-duration: 1s;
  --ee-animation-duration-fast: calc(var(--ee-animation-duration) * .5);
  --ee-animation-duration-slow: calc(var(--ee-animation-duration) * 2);
  --ee-shadow: 0 2px 12px rgba(0, 0, 0, .2);
  --ee-border-radius: .25em;
}

* {
  box-sizing: border-box;
}

body {
  line-height: 1.4;
  margin: 0px;
}

body[pc] {
  .mb {
    display: none !important;
  }
}

body[mb] {
  font-size: 4.1026vw;
  overflow-x: hidden;

  .pc {
    display: none !important;
  }
}

ol,
ul {
  list-style: none;
  padding-left: 0;
  /* 360 急速浏览器没有此属性，需要 -end 和 -start 分开设置 margin-block: 0; */
  /* todo: 可以考虑做个项目专门使用各种浏览器浏览同一网页并生成截图，对比 DOM 元素布局存在的差异形成报告 */
  margin-block-end: 0;
  margin-block-start: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.a {
  text-decoration: underline;
  color: var(--primary0);
}


/* 通用disabled样式 <div disabled> | <div disabled="true"> 均可用 */
[disabled]:not([disabled=false]) {
  cursor: not-allowed !important;
  filter: none !important;
  opacity: .5 !important;

  // 外部disabled，子元素不得不也加上disabled时(例如ee-input内的input标签)，防止多次半透明
  [disabled]:not([disabled=false]) {
    opacity: 1 !important;
  }

  *,
  *:hover {
    cursor: not-allowed !important;
    filter: none !important;
    // 外部disabled，子元素不得不也加上disabled时(例如ee-input内的input标签)，防止多次半透明
    // 但是如果加了，原本 opacity:0 的子元素就会被显示出来
  }

  &:focus,
  &:active {
    pointer-events: none !important;
  }
}


/* 容器较为通用的让内容居中的flex布局
 * p属性以可决定flex方向，没有p默认从左往右
 * p = 1: 从上往下
 * p = 2: 从又往左
 * p = 3: 从下往上
 */
.fc {
  display: flex;
  justify-content: center;
  align-items: center;
  // todo: gap 可以控制 flex 布局的行列间隔
  // todo: order 可以控制子元素的顺序

  &[p='0'] {
    &> :first-child:not(:only-child) {
      margin-right: .25em;
    }
  }

  &[p='1'] {
    flex-direction: column;

    &> :first-child:not(:only-child) {
      margin-bottom: .25em;
    }
  }

  &[p='2'] {
    flex-direction: row-reverse;

    &> :first-child:not(:only-child) {
      margin-left: .25em;
    }
  }

  &[p='3'] {
    flex-direction: column-reverse;

    &> :first-child:not(:only-child) {
      margin-top: .25em;
    }
  }
}

/* 容器较为通用的让内容居中间隔一致的flex布局 */
.fa {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

/* 容器让内容横向展示并且自动换行的flex布局
 * flex布局需要解决的问题
 * 1. 一行放几个：子元素设置width, min-width, flex-basic都可以解决
 * 2. 子元素宽度：
 *   2.1 宽度不可变flex-grow: 0：缺点父容器的空间会有空白，宽度使用%又不太兼容屏幕放小；优点不用担心最后一行的问题
 *   2.2 宽度可变flex: 1 1 300px：缺点最后一行元素大小和前面的不一致；优点方便适配
 * 3. 最后一行问题：一般采取增加空元素来解决，但每行元素个数发生变化则可能导致需要的空元素个数发生变化，侦听这个变化是问题
 * 最终建议使用方案<element v-flex="300px">
 */
.fcw {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  // --margin: 1em;
  --grow: 1;
  --basis: auto;

  // JS添加的空元素
  #nil {
    visibility: hidden;
  }

  &>* {
    flex-grow: var(--grow);
    flex-shrink: 1;
    flex-basis: var(--basis);

    // &:not([last]) {
    //   margin: 0 var(--margin) var(--margin) 0;
    // }

    // &[last] {
    //   margin-bottom: var(--margin);
    // }
  }
}

/* 父容器 flex 布局时子元素宽度可伸缩，最大则可以沾满父容器剩余的空间
 * 例如父容器宽度自适应内容，最大宽度为400px
 * 现有3个子元素 a b c，a和c的宽度固定，假设为50px，总共占用100px
 * 现在希望 b 元素的宽度根据其内容自适应
 * 父容器还剩下 300px 的空间，b 元素的内容很多时，宽度也不能超过 300px，超过显示滚动条
 * 此时 b 元素就适用于此样式
 */
.flex-grow-adapt {
  // 占满父容器剩余的空间（内容过多时生效）
  flex: 1;
  // 内容过多超出的部分滚动
  overflow: auto;
  // 最大宽度为内容的宽度，这在内容不多时可以自适应内容宽度
  max-width: max-content;
}

.no-scroll-bar {
  white-space: nowrap;
  overflow: auto;
  width: 100%;

  &::-webkit-scrollbar {
    width: 0;
    height: 0
  }
}

/* 文字超出区域范围显示... */
.ellipsis,
.ellipsis2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 文字超出区域范围显示...（可以显示2行文字，兼容性貌似不太好） */
.ellipsis2 {
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


.overlay-parent {
  overflow: hidden;
  position: relative;
}

/* 灰色遮罩层 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--ee-mask);

  /*全屏灰色遮罩层 使用方法 class="overlay full" */
  &.full {
    position: fixed;
    bottom: 0;
    right: 0;
  }

  &.hidden {
    background-color: transparent;
  }
}

/* animation动画：eea name 动画结束事件@animationend */
.eea {

  /* 淡入淡出 */
  &.fade {
    animation: fade forwards 1 3s;
  }

  @keyframes fade {
    0% {
      opacity: 0
    }

    20% {
      opacity: 1
    }

    80% {
      opacity: 1
    }

    100% {
      opacity: 0
    }
  }
}


/* transition动画 动画结束事件@transitionend */
/* 使用示例1class="eet move top in" */
/* 使用示例2class="eet move top" :in="Boolean变量" */
/* 播放添加(使元素可见)in，反向播放(使元素不可见)则使用js去掉in */
.eet {
  transition: all var(--ee-transition-duration);

  /* 从屏幕外进入屏幕：move top in */
  &.move {
    position: fixed;

    &.top {
      top: 0;
      left: 0;
      right: 0;

      &:not(.in),
      &[in]:not([in=false]) {
        transform: translateY(-150%);
      }
    }

    &.right {
      top: 0;
      right: 0;
      height: 100%;

      &:not(.in),
      &[in]:not([in=false]) {
        transform: translateX(150%)
      }
    }

    &.bottom {
      bottom: 0;
      left: 0;
      right: 0;

      &:not(.in),
      &[in]:not([in=false]) {
        transform: translateY(150%)
      }
    }

    &.left {
      top: 0;
      left: 0;
      height: 100%;

      &:not(.in),
      &[in]:not([in=false]) {
        transform: translateX(-150%)
      }
    }

    &.center {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: max-content;
      height: max-content;

      &:not(.in),
      &[in]:not([in=false]) {
        opacity: 0;
      }
    }
  }

  /* 渐入 */
  &.fade {

    &:not(.in),
    &[in]:not([in=false]) {
      opacity: 0;
    }
  }

  /* 展开/折叠：visible in */
  &.visible {

    // 里面有子元素也要跟着一起缩小
    * {
      transition-duration: var(--ee-transition-duration);
      transition-property: padding, margin, line-height, opacity, min-width, min-height !important;
    }

    &:not(.in) *,
    &[in]:not([in=false]) *,
    &:not(.in),
    &[in]:not([in=false]) {
      padding: 0 !important;
      margin: 0 !important;
      line-height: 0 !important;
      opacity: 0 !important;
      // 防止设置了min-width和min-height导致无法继续缩小
      min-width: 0 !important;
      min-height: 0 !important;
      // 没法让设置了宽高的元素缩小，对于应用了visible且设置了固定宽高的元素
      // 自行设置&.visible:not(.in) [选择器] { width: 0; height: 0 }
    }
  }
}

[class*="eea-"],
.eea {
  animation: var(--ee-animation-duration) ease-in-out both;

  &[class*="-reverse"] {
    animation-direction: reverse;
  }

  &[class*="-fast"] {
    --ee-animation-duration: var(--ee-animation-duration-fast);
  }

  &[class*="-slow"] {
    --ee-animation-duration: var(--ee-animation-duration-slow);
  }

  &[class*="-stop"],
  &[class*="-hover"]:not(:hover):not(:focus) {
    animation-name: none !important;
  }

  &[class*="-rotate"] {
    animation-name: ee-rotate;
  }

  &[class*="-rotating"] {
    animation-name: ee-rotate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  &[class*="-fade"] {
    animation-name: ee-fade;
  }

  &[class*="-shake"] {
    animation-name: ee-shake;
  }
}

@keyframes ee-rotate {
  100% {
    transform: rotate(360deg)
  }
}

@keyframes ee-fade {
  0% {
    opacity: 0
  }

  100% {
    opacity: 100
  }
}

@keyframes ee-shake {

  0%,
  100% {
    transform: translateX(0)
  }

  10% {
    transform: translateX(-9px)
  }

  20% {
    transform: translateX(8px)
  }

  30% {
    transform: translateX(-7px)
  }

  40% {
    transform: translateX(6px)
  }

  50% {
    transform: translateX(-5px)
  }

  60% {
    transform: translateX(4px)
  }

  70% {
    transform: translateX(-3px)
  }

  80% {
    transform: translateX(2px)
  }

  90% {
    transform: translateX(-1px)
  }
}

/* transition动画 动画结束事件@transitionend */
/* 使用示例 class="eet-in-fade" */
/* 播放添加(使元素可见)-in-，反向播放(使元素不可见)则使用js去掉-in */
/* 使用 [class*=] 选择器的方案和原本使用 . 选择器的方案对比，有如下优劣 */
// 优势
// 1. 不容易重名，例如原本的 move fade visible 都是常见名字容易和其它全局样式重名
// 劣势
// 1. js 操作 in 时增加了复杂度
// 2. 页面渲染时性能略微下降
[class*="eet-"],
.eet {
  transition: all var(--ee-transition-duration) ease-out;

  &[class*="-move"] {
    &[class*="-fixed"] {
      position: fixed;

      &[class*="-top"] {
        top: 0;
        left: 0;
        right: 0;
      }

      &[class*="-right"] {
        top: 0;
        right: 0;
        height: 100%;
      }

      &[class*="-bottom"] {
        bottom: 0;
        left: 0;
        right: 0;
      }

      &[class*="-left"] {
        top: 0;
        left: 0;
        height: 100%;
      }

      &[class*="-center"] {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: max-content;
        height: max-content;
      }
    }
  }

  /* 通过 eet-in-动画名 来播放入动画，缺少 -in 则视为出动画 */
  &:not([class*="-in-"]):not([class*="-hover"]),
  /* 通过 鼠标悬浮/获得焦点 来播放入动画，否则视为出动画 */
  &[class*="-hover"]:not(:hover):not(:focus) {

    /* 移入/移出 */
    &[class*="-move"] {

      &[class*="-top"] {
        transform: translateY(-100%);

        &[class*="-small"] {
          transform: translateY(-10px);
        }
      }

      &[class*="-right"] {
        transform: translateX(100%);

        &[class*="-small"] {
          transform: translateX(10px);
        }
      }

      &[class*="-bottom"] {
        transform: translateY(100%);

        &[class*="-small"] {
          transform: translateY(10px);
        }
      }

      &[class*="-left"] {
        transform: translateX(-100%);

        &[class*="-small"] {
          transform: translateX(-10px);
        }
      }

      &[class*="-center"] {
        opacity: 0;

        &[class*="-small"] {
          opacity: .6;
        }
      }
    }

    /* 放大/缩小 */
    &[class*="-scale"] {

      &[class*="-down"] {
        transform: scale(1.1)
      }

      &[class*="-up"] {
        transform: scale(.9)
      }
    }

    /* 淡入/淡出 */
    &[class*="-fade"] {
      opacity: 0;
    }

    /* 展开/折叠 */
    &[class*="-visible"] {

      &,
      & * {
        padding: 0 !important;
        margin: 0 !important;
        line-height: 0 !important;
        opacity: 0 !important;
        // 防止设置了min-width和min-height导致无法继续缩小
        min-width: 0 !important;
        min-height: 0 !important;
        // 没法让设置了宽高的元素缩小，对于应用了visible且设置了固定宽高的元素
        // 自行设置 [class*="-visible"]:not([class*="-in-"]) [选择器] { width: 0; height: 0 }
      }
    }
  }
}

[class*="eec-"][class*="-button"]:hover {
  cursor: pointer;
}

[class*="eec-"] {}